<template>
  <div>
    <div class="header">
    </div>
    <div class="menu">
      <div class="menu-container">
        <admin-menu menuName="/admin/type"></admin-menu>
      </div>
      <div class="content">
        <a href="javascript:void(0)" @click="addProject">新增</a>
          <el-table
            :data="typeList"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="专题名称"
              width="180">
            </el-table-column>
            <el-table-column
            label="使用图标">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
                <el-button type="text" size="small" @click="editType(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
      </div>
    </div>
    <el-dialog title="添加标签" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="标签名称" label-width="120px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标签图标" label-width="120px">
          <!-- <el-input v-model="form.introduction" ></el-input> -->
          <el-upload
          class="upload-demo"
          ref="upload"
          action="/api/updateproject"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          <img style="width:20%" :src="form.img" alt="">
        </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitProject">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import adminMenu from '../../components/admin/menu'
import myArticle from '../../components/admin/article'
import mixinsList from '../../mixins/index.js'
import axios from 'axios'

export default {
  mixins: [mixinsList],
  data () {
    return {
      tableData: [],
      form: {},
      dialogFormVisible: false
    }
  },
  methods: {
    handleDelete (obj) {
      this.$store.dispatch('deleteType', {
        data: {
          id: obj.id
        },
        cb: (res) => {
          if (res.data.code === 20000) {
            this.$message.success('删除成功')
            this.getType()
          }
        }
      })
    },
    addProject () {
      this.dialogFormVisible = true
    },
    submitProject () {
      if (this.form._id) {
        this.$store.dispatch('addType', {
          data: {
            name: this.form.name,
            introduction: this.form.introduction,
            id: this.form._id
          },
          cb: (res) => {
            if (res.data.code === 20000) {
              this.$message.success('修改成功')
              this.dialogFormVisible = false
              this.getType()
            }
          }
        })
      } else {
        var obj = this.$refs.upload.uploadFiles[0] ? this.$refs.upload.uploadFiles[0].raw : ''
        var image = new FormData()
        image.append('img', obj)
        image.append('name', this.form.name)
        axios.post('/api/type/add', image, {
          headers: {
            'Content-Type': 'multipart/form-data',
            'accesstoken': localStorage.getItem('accesstoken')
          }
        }).then((res) => {
          if (res.data.code === 20000) {
            this.dialogFormVisible = false
            this.getType()
          } else {
            this.$message.error(res.data.msg)
          }

        })
      }
    },
    editType (obj) {
      this.dialogFormVisible = true
      this.form = obj
    }
  },
  components: {
    adminMenu,
    myArticle
  },
  mounted () {
    this.getType()
  }
}
</script>
<style lang="stylus" scoped>
  .header
    background-color #4d535b
    height 40px
    width 100%
  .menu
    display flex
    .menu-container
      flex-basis 200px
    .content
      flex-grow 2
      background-color #fff
      padding 40px
</style>
